<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="test">
			<h1>测试</h1>
				<test_2></test_2>
				<test_3></test_3>
		</div>
		<script type="text/x-template" id="test_2">
			<div id="test_2">
				<h1 v-on:add="Totle()" @click='add'>hahahha</h1>
			</div>

		</script>

		<script type="text/x-template" id="test_3">
			<div id="test_3">
					<h2>asdasdfasdf</h2>
			</div>

		</script>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="vue.min.js"></script>
		<script type="text/javascript">
			var bus = new Vue({})
			//组件1
			Vue.component('test_2', {
				template: '#test_2',
				methods:{
					add:function(){
						console.log('asdfasd')
						bus.$emit('Totle','hehe'); //Hub触发事件
					}
				}

			})
			//组件2
			Vue.component('test_3', {
				template: '#test_3',
				created:function(){
					 bus.$on('Totle', function(res){ //Hub接收事件
				       console.log(res)
				    });
				}

			})
			
			
			var app = new Vue({
				el:'#test'
//				Totle:function(){
//						console.log('totle')
//					}
			})
		</script>
	</body>

</html>